<template>
  <footer v-if="total.length">
    <div class="left">
      <em>{{todoTotal}}</em>
      <em>{{todoTotal === 1 ? 'item' : 'items'}}</em>
      <em>left</em>
    </div>
    <div class="status">
      <span :class="[active === 'all' ? 'active' : '']" @click="statusChange('all')">All</span>
      <span :class="[active === 'active' ? 'active' : '']" @click="statusChange('active')">Active</span>
      <span :class="[active === 'completed' ? 'active' : '']" @click="statusChange('completed')">completed</span>
    </div>
    <div class="clearCompleted" @click="removeTodo">Clear completed</div>
  </footer>
</template>
<script>
export default {
  name:'TodoFooter',
  props:['total','clearCompleted'],
  data() {
    return {
      active:'all'
    }
  },
  methods: {
    statusChange:function (status) {
      this.setStatus(status);
      this.active = status;
    },
    setStatus:function (status) {
      this.$bus.$emit('setStatus', status)
    },
    removeTodo: function () {
      this.clearCompleted()
    },
  },
  computed:{
    // 计算所有已完成的数量
    todoTotal:function () {
      return this.total.filter(item => item.isComplete).length
    },
  },
  mounted() {
    console.log(this.todoTotal)
    this.$bus.$emit('setIsAll', this.todoTotal)
  },
}
</script>
<style scoped>
  /* footer */
  footer {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    /* border-bottom: 1px solid #2e2e2e; */
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgb(0 0 0 / 20%), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgb(0 0 0 / 20%);
  }
  footer > div.left {
    width: 100px;
    display: flex;
    justify-content: space-between;
  }
  footer > div.status {
    display: flex;
    width: 280px;
    justify-content: flex-start;
  }
  footer > div.status > span {
    margin-right: 10px;
    background-color: #409EFF;
    padding: 5px 10px;
    cursor: pointer;
    color: #fff;
    transition: background-color .2s linear;
  }
  footer > div.status > span.active {
    background-color: #F56C6C;
  }
  footer > div.clearCompleted {
    background-color: #409EFF;
    padding: 5px 10px;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s linear;
  }
  footer > div.clearCompleted:hover {
    background-color: #F56C6C;
  }
</style>